<template>
  <div class="upload" v-loading="loading" element-loading-text="数据加载中">
    <div class="affixTop10">
      <div class="right">
        <el-button type="primary" size="medium" @click="onKeep" :loading="loading" v-if="this.lens-1>this.len">继续加载
        </el-button>
        <el-button type="danger" size="medium" @click="cancel">取消</el-button>
        <template v-if="this.switch">
          <template v-if="this.formList.type==='third'">
            <el-button type="primary" size="medium" @click="saveThird" :loading="loading">保存</el-button>
            <el-button type="primary" size="medium" @click="exportReport" :loading="loading">导出报告</el-button>
          </template>
          <el-button type="primary" size="medium" @click="save" :loading="loading" v-else>保存</el-button>
          <!-- <el-button type="primary" size="medium" @click="onEdit" :loading="loading" v-else>修改</el-button> -->
        </template>
      </div>
    </div>
    <el-alert title="请保留4位小数，多出的位数会自动截断删除" type="warning" effect="light" show-icon closable></el-alert>
    <div class="title">
      <el-row :gutter="20">
        <el-col :span="10">
          采购需求说明申报情况
        </el-col>
        <el-col :span="10">
          审核意见
        </el-col>
        <el-col :span="4">
          审核依据
        </el-col>
      </el-row>
    </div>
    <el-row :gutter="20">
      <el-col :span="24" :offset="0">
        <div v-for="(itemP,indexP) in bidList" class="divBorder" :key='indexP'>
          <!-- 项目信息 -->
          <div class="divBorderBottom">
            <el-row :gutter="20" class="title-subject">
              <el-col :span="10">
                <el-row :gutter="20">
                  <el-col :span="6">包组{{itemP.index}}：</el-col>
                  <el-col :span="18">{{itemP.name}} </el-col>
                  <el-col :span="6">包组预算：</el-col>
                  <el-col :span="18">{{itemP.pack_service_amount}} 万元 </el-col>
                </el-row>
              </el-col>
              <el-col :span="10" class="colBorder">
                <el-row :gutter="20">
                  <el-col :span="6" :offset="0">包组{{itemP.index}}：</el-col>
                  <el-col :span="18" :offset="0">
                    <el-input v-model="itemP.verify_package_name" type="textarea" :rows="2" placeholder="包组名称">
                    </el-input>
                  </el-col>
                </el-row>
              </el-col>
              <el-col :span="4" class="p5">
                <el-input v-model="itemP.verify_package_basis" type="textarea" :rows="2" placeholder="审核意见">
                </el-input>
              </el-col>
            </el-row>
          </div>

          <div v-for="(itemS,indexS) in itemP.children" :key='indexS'>
            <!-- 标的信息 -->
            <div class="divBorderBottom">
              <el-row :gutter="20" class="title-subject">
                <el-col :span="10" class="p5">
                  <el-row :gutter="20">
                    <el-col :span="6">标的{{itemS.index}}：</el-col>
                    <el-col :span="18" :offset="0">
                      {{itemS.name}}
                    </el-col>
                    <el-col :span="6" :offset="0">预算标准：</el-col>
                    <el-col :span="18" :offset="0">{{itemS.sub_service_amount}}万元，</el-col>
                    <el-col :span="6" :offset="0">运维期限：</el-col>
                    <el-col :span="18" :offset="0">{{itemS.serve_time}}个月，</el-col>
                    <el-col :span="6" :offset="0">类型：</el-col>
                    <el-col :span="18" :offset="0">{{itemS.type}}</el-col>
                    <template v-if="itemS.type && itemS.type.indexOf('其他')!=-1">
                      <el-col :span="6" :offset="0">其他类型：</el-col>
                      <el-col :span="18" :offset="0"> {{itemS.typtype_othere}}</el-col>
                    </template>
                  </el-row>
                </el-col>
                <el-col :span="10" class="colBorder">
                  <el-row :gutter="20">
                    <el-col :span="6" :offset="0"> 标的{{itemS.index}}：</el-col>
                    <el-col :span="18" :offset="0">
                      <el-input :autosize="{ minRows: 1, maxRows: 5}" v-model="itemS.verify_subject_name"
                        placeholder="标的名称">
                      </el-input>
                    </el-col>
                    <el-col :span="6" :offset="0"> 预算标准：</el-col>
                    <el-col :span="18" :offset="0">
                      <el-input v-model="itemS.verify_subject_apply_money" placeholder="预算金额">
                        <template slot="append">万元</template>
                      </el-input>
                    </el-col>
                    <el-col :span="6" :offset="0"> 运维期限：</el-col>
                    <el-col :span="18" :offset="0">
                      <el-input v-model="itemS.verify_subject_serve_date" placeholder="运维期限">
                        <template slot="append">月</template>
                      </el-input>
                    </el-col>
                    <el-col :span="6" :offset="0"> 类型：</el-col>
                    <el-col :span="18" :offset="0">
                      <el-cascader :options="serve_type" v-model="itemS.verify_subject_serve_type" clearable
                        @change="changetype(itemS)" class="wid">
                      </el-cascader>
                    </el-col>
                    <div v-if="itemS.verify_subject_serve_type_other_switch">
                      <el-col :span="6" :offset="0">其他类型：</el-col>
                      <el-col :span="18" :offset="0">
                        <el-input v-model="itemS.verify_subject_serve_type_other" placeholder="请填写具体的其他类型">
                        </el-input>
                      </el-col>
                    </div>
                  </el-row>
                </el-col>
                <el-col :span="4" class="p5">
                  <el-input v-model="itemS.verify_subject_basic" type="textarea" :rows="6" placeholder="审核意见">
                  </el-input>
                </el-col>
              </el-row>
            </div>
            <!-- 工程量清单 -->
            <div class="divBorderBottom">
              <el-row :gutter="20">
                <div class="title-subject" style="padding-left: 10px;">工程量清单：</div>
                <el-col :span="10" class="p5">
                  <div class="targetVal">
                    <span v-for="(itemD,indexD) in itemS.devices" :key="indexD">
                      <div v-for="(item,Dindex) in itemD.items" style="padding-left:10px " :key="Dindex">
                        <div v-if="item.device_name && item.device_name.length<20000">
                          {{Dindex+1}}、{{item.device_name}}，数量：{{item.device_num}}<br>
                        </div>
                        <div v-else>
                          <span>{{Dindex+1}}、{{item.device_name}}，数量：{{item.device_num}}</span>
                        </div>
                      </div>
                    </span>
                  </div>
                </el-col>
                <el-col :span="10" class="p5">
                  <el-input v-model="itemS.verify_subject_list" placeholder="工程量清单" type="textarea" :rows="6">
                  </el-input>
                </el-col>
                <el-col :span="4" class="p5">
                  <el-input v-model="itemS.verify_subject_list_basis" placeholder="审核意见" type="textarea" :rows="6">
                  </el-input>
                </el-col>
              </el-row>
            </div>
            <!-- 服务内容和指标项 -->
            <div class="title-subject" style=" padding-left: 5px;">运维服务标准：</div>
            <div style=" padding: 0px 5px 0px 5px;border-bottom: 2px solid #696969;">
              <el-row :gutter="20">
                <div class="title-subject" style="margin-left:15px">服务内容：</div>
                <el-col :span="10" class="p5">
                  <el-input v-model="itemS.content" placeholder="工程量清单" type="textarea" :rows="6" readonly></el-input>
                </el-col>
                <el-col :span="10" class="p5">
                  <el-input v-model="itemS.verify_subject_serve" type="textarea" :rows="6" placeholder="请填写服务内容">
                  </el-input>
                </el-col>
                <el-col :span="4" class="p5">
                  <el-input v-model="itemS.verify_subject_serve_basis" type="textarea" :rows="6" placeholder="请填写审核意见">
                  </el-input>
                </el-col>
              </el-row>
              <!-- 指标项 -->
              <el-row :gutter="20">
                <div class="title-subject" style="margin-left:15px">指标项：</div>
                <el-col :span="10" class="p5">
                  <div class="targetVal" style="padding:0px 5px">
                    <div v-for="(itemT,Tindex) in itemS.subjectSubs" :key="Tindex">
                      <div class="title-subject">指标{{Tindex+1}}：</div>
                      &#12288;指标项：{{itemT.target_index_params}}。<br>
                      &#12288;指标描述：{{itemT.target_desc_params}}。<br>
                      &#12288;指标要求：{{itemT.target_require_params}}。<br>
                      &#12288;服务时间：{{itemT.service_time_params}}。<br>
                      &#12288;服务方式：{{itemT.service_method_params}}。<br>
                      &#12288;交付成果：{{itemT.service_result_params}}。<br>
                    </div>
                  </div>
                </el-col>
                <el-col :span="10" class="p5">
                  <div>
                    <el-input v-model="itemS.verify_subject_serve_sub" type="textarea" :rows="6" placeholder="请填写指标项">
                    </el-input>
                  </div>
                </el-col>
                <el-col :span="4" class="p5">
                  <el-input v-model="itemS.verify_subject_serve_sub_basis" type="textarea" :rows="6"
                    placeholder="请填写审核意见"></el-input>
                </el-col>
              </el-row>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>

    <div class="center">
      <el-button type="primary" size="medium" @click="onKeep" :loading="loading" v-if="this.lens-1>this.len">继续加载
      </el-button>
      <el-button type="danger" size="medium" @click="cancel">取消</el-button>
      <template v-if="this.switch">
        <el-button type="primary" size="medium" @click="saveThird" :loading="loading"
          v-if="this.formList.type==='third'">保存</el-button>
        <el-button type="primary" size="medium" @click="save" :loading="loading"
          v-else-if="this.formList.type==='choose'">保存</el-button>
        <el-button type="primary" size="medium" @click="save" :loading="loading" v-else>保存</el-button>
        <!-- <el-button type="primary" size="medium" @click="onEdit" :loading="loading" v-else>修改</el-button> -->
      </template>
    </div>

    <block-report-item v-show="false" ref="blockReport"></block-report-item>
  </div>
</template>
<script>
import BlockReportItem from '@/components/Report/BlockReport'
import { d_serveAll } from '@/utils/dicts'
export default {
  name: 'BidProject',
  components: {
    BlockReportItem
  },
  props: {
    switch: {
      type: Boolean,
      default: () => {
        return false
      }
    },
    formList: {
      type: Object,
      default: () => {
        return {
          id: ''
        }
      }
    },
  },
  data () {
    return {
      serve_type: d_serveAll,
      loading: false,
      bidAllLis: [],
      bidList: [],
      lens: 1,
      len: 0,
      thirdId: ''
    }
  },
  created () {

  },
  mounted () {
    if (this.formList.id) {
      if (this.formList.type === 'third') {
        this.initThird()
      } else if (this.formList.type === 'choose') {
        this.initChoose()
      } else {
        this.init()
      }
    }
  },
  methods: {
    async init () {
      this.loading = true
      const upLog = await this.$http('blockLogUp', {
        id: this.formList.id,
        del_flag: '0'
      })
      this.lens = 1
      this.len = 0
      const res = await this.$http('blockVerifyObj', {
        id: this.formList.id
      })
      this.cut(res)
    },
    async initThird () {
      this.loading = true
      this.lens = 1
      this.len = 0
      const res = await this.$http('blockthirdObj', {
        project_id: this.formList.id,
        status: '4'
      })
      this.thirdId = res.id
      this.cut(res)
    },
    async initChoose () {
      this.loading = true
      this.lens = 1
      this.len = 0
      const res = await this.$http('blockthirdObj', {
        id: this.formList.id
      })
      this.cut(res)
    },
    cut (res) {
      if (res.data_json) {
        this.bidAllList = JSON.parse(res.data_json)
        this.lens = this.bidAllList.length
        this.bidList.push(this.bidAllList[this.len])
      } else {
        this.bidAllList = JSON.parse(res.fill_list)
        this.lens = this.bidAllList.length
        this.bidList.push(this.bidAllList[this.len])
      }
      this.loading = false
    },
    onKeep () {
      this.loading = true
      if (this.len < this.lens - 1) {
        this.len++
        this.bidList.push(this.bidAllList[this.len])
        this.loading = false
      } else {
        this.$tips.error('已经加载至最后一个')
        this.loading = false
      }
    },
    async save () {
      if (this.len < this.lens - 1) {
        this.$tips.error('数据未填写完全')
        return false
      }
      let totalAmount = 0
      this.bidList.forEach(item => {
        totalAmount = 0
        item.children.forEach(itemC => {
          if (itemC.verify_subject_apply_money) {
            itemC.verify_subject_apply_money = parseFloat(itemC.verify_subject_apply_money).toFixed(4)
            totalAmount = parseFloat(itemC.verify_subject_apply_money) + totalAmount
          }
        })
        item.pack_service_amount_check = totalAmount
      })
      this.loading = true
      const res = await this.$http('blockVerifyUp', {
        project_id: this.formList.id,
        data_json: JSON.stringify(this.bidList)
      })
      this.$tips.success(res.errmsg)
      this.loading = false
      this.$emit('cancel');
      this.$emit('init');
    },
    // 咨询机构更新表单
    async saveThird () {
      if (this.len < this.lens - 1) {
        this.$tips.error('数据未填写完全')
        return false
      }
      let totalAmount = 0
      this.bidList.forEach(item => {
        totalAmount = 0
        item.children.forEach(itemC => {
          if (itemC.verify_subject_apply_money) {
            itemC.verify_subject_apply_money = parseFloat(itemC.verify_subject_apply_money).toFixed(4)
            totalAmount = parseFloat(itemC.verify_subject_apply_money) + totalAmount
          }
        })
        item.pack_service_amount_check = totalAmount
      })
      this.loading = true
      const res = await this.$http('blockthirdUp2', {
        id: this.thirdId,
        data_json: JSON.stringify(this.bidList)
      })
      this.$tips.success(res.errmsg)
      this.loading = false
      this.$emit('cancel');
      this.$emit('init');
    },
    // 审核报告确认
    async exportReport () {
      const res = await this.$http('blockChoose', {
        id: this.formList.id,
        report_company_id: this.thirdId
      })
      await this.$refs.blockReport.writerUpdate(this.formList.id)
    },
    changetype (item) {
      let arr = item.verify_subject_serve_type
      let other = '17,80,227,328,354,360'
      if (arr) {
        let type = arr[arr.length - 1]
        if (other.indexOf(type) > -1) {
          item.verify_subject_serve_type_other_switch = true
        } else {
          item.verify_subject_serve_type_other_switch = false
        }
      }
    },
    cancel () {
      this.$emit('cancel')
    }
  },
  computed: {
  },
  watch: {
    'formList.id' (val) {
      if (this.formList.type === 'third') {
        this.initThird()
      } else if (this.formList.type === 'choose') {
        this.initChoose()
      } else {
        this.init()
      }
    }
  }
}
</script>
<style lang='scss' scoped>
.title-subject {
  font-size: 16px;
  font-weight: 800;
  /*border-top: 2px solid #696969*/
}
.p5 {
  padding: 5px;
}
.divBorder {
  border-top: 2px solid #696969;
  border-left: 2px solid #696969;
  border-right: 2px solid #696969;
  border-radius: 5px;
  margin-bottom: 10px;
}
.divBorderBottom {
  padding: 0px 5px 0px 5px;
  border-bottom: 2px solid #696969;
}
.colBorder {
  border-left: 2px solid #696969;
  border-right: 2px solid #696969;
  padding: 5px;
}
.targetVal {
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  height: 10rem;
  padding: 5px 0px;
  overflow-y: auto;
}
</style>
